<template>
    <FSMask v-show="isShow">
        <div class="option mask">
            <div class="map-name  g tac">
                <h4>地图名称</h4>
                <div  class="pd10">
                    <input type="text" v-model="mapInfo.name">
                </div>
            </div>
            <div class="map-size g tac">
                <h4>地图大小</h4>
                <div class="pd10">
                    宽度：<input type="range" v-model="mapInfo.width" min="20" max="200"> <input type="number" v-model="mapInfo.width">
                </div>
                <div class="pd10">
                    高度：<input type="range" v-model="mapInfo.height" min="20" max="200"> <input type="number" v-model="mapInfo.height">
                </div>
            </div>
            <div class="wall-tile g pd10">
                <h4>初始外圈地形</h4>
                <TileInfo :data="mapInfo.wall" /> 
                <div class="pd10"></div>
                <TileTable :data="wallList" @click="changeWall"/>
            </div>
            <div class="groundl-tile g pd10">
                <h4>初始平地地形</h4>
                <TileInfo :data="mapInfo.ground" /> 
                <div class="pd10"></div>
                <TileTable :data="groundList" @click="changeGround"/>
            </div>
            <div class="btns">
                <Button size="large" title="确定" type="primary" @click="OKClick">
                    <i class="iconfont icon-custom-ok"></i>&emsp;确定
                </Button>
                <Button size="large" title="取消" type="warning" @click="CancelClick">
                    <i class="iconfont icon-cancel"></i>&emsp;取消
                </Button>
            </div>
        </div>
    </FSMask>
</template>
<script>
import FSMask from '../../common/FSMask.vue'
import TileInfo from '../../manager/Tile/TileInfo.vue'
import TileTable from '../../manager/Tile/TileTable.vue'
import Button from'../../common/Button.vue'
import { reactive, toRefs } from 'vue'
export default {
    components:{FSMask,TileInfo,TileTable,Button},
    emits:['success'],
    props:['mapData','wallList','groundList'],
    setup(props,context) {
        const {mapData,wallList,groundList} = props
        const state = reactive({
            isShow:false,
            mapInfo:mapData,
            walls:wallList,
            grounds:groundList
        })

        const changeGround = (tile)=>{
            state.mapInfo.ground = tile
            
        }
        const changeWall = (tile)=>{
            state.mapInfo.wall = tile
        }
        const OKClick = ()=>{
            context.emit('success',state.mapInfo)
            state.isShow = false
        }
        const CancelClick = ()=>{
            state.isShow = false
        }

        return {
            ...toRefs(state),
            changeGround,
            changeWall,
            OKClick,
            CancelClick
        }
    },
    methods:{
        setActive(flag){
            this.isShow = false
        },
        show(){
            this.isShow = true
        },
        hide(){
            this.isShow = false
        }
    }
}
</script>
<style lang="less" scoped>
@import '../../../theme.less';
.option {
    min-width: 600px;
    max-width: 60vw;
    padding: 20px;
    border: 1px solid @theme-line;
    background-color: @theme;
    display: flex;
    border-radius: 6px;
    flex-wrap: wrap;
    h4 {
        padding: 10px 0;
        font-size: 20px;
    }
    .g {
        width: 50%;
    }
    .btns {
        width: 100%;
        display: flex;
        padding: 10px;
        justify-content: center;
    }
}
</style>